<template>
  <div class="propaganda-focus">
    <div class="propaganda-focus-item" v-for="item in list">
      <div class="title">{{item.title}}</div>
      <div class="desc">{{item.desc}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PropagandaFocus',
  data(){
    return{
      list:[
        {title:'《民法典》楼道杂物法律责任',desc:'详细解读楼道杂物堆放的法律责任和处罚措施，提醒居民注意消防安全。'},
        {title:'反诈案例：冒充物业收费诈骗',desc:'近期高发的冒充物业收费诈骗案例解析，提醒居民提高警惕。'},
        {title:'消防安全法规图解',desc:'通过图文形式展示消防安全法规要点，提高居民安全意识。'},
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.propaganda-focus{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .propaganda-focus-item{
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    border: 1px solid #32B4FF;
    border-radius: 5px;
    background: #06213B;
    padding:10px 15px;
    .title{
      color: #32B4FF;
      margin-bottom: 10px;
      font-weight: bold;
    }
    .desc{
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
